<template>
    <div class="search">
        <my-dialog cancel="已取消删除" success="删除成功！" schedule="2000" :visible.sync="storeVisible" :success = "success">
            <span slot="message">此操作将永久删除该文件， 是否继续？</span>
        </my-dialog>
        <cast-about></cast-about>
        <div class="srcollM">
            <div class="searchFor" v-show="searchFor.length">
                <h2>最近搜索</h2>
                <i class="el-icon-delete" @click='del'></i><br>
                <span v-for="val in searchFor">{{val}}</span>
            </div>
            <div class="offerNews">
                <h2>热门搜索</h2>
                <span v-for="item in offerNews">{{item}}</span>
            </div>
        </div>

    </div>
</template>

<script>
    export default {
        name: "search",
        data(){
            return{
                cancel:false,
                searchFor:[],
                storeVisible:false,
                //热门信息
                offerNews:['高清摄像头','办公室靠枕','充电宝','苏打水'],
            }
        },
        created(){
            this.$bus.$on('storeIpt',(val)=> {
                this.searchFor.unshift(val);
                this.$_store.set('data', this.searchFor, 'object');
            });
            this.searchFor = this.$_store.get('data','object') || [];
        },
        methods:{
            del(){
                this.storeVisible = true;
            },
            success(){
                this.$_store.destroy('data');
                this.searchFor = [];
            },
        },

    }
</script>

<style scoped>
    .srcollM{
        margin-top: 160px;
    }
    .offerNews>span, .searchFor>span{
        font-size: 26px;
        display: inline-block;
        margin: 24px;
        border-radius: 6px;
        padding: 8px 12px;
        background: rgba(255, 195, 214, 0.3);
        color: rgba(94, 85, 83, 0.86);
    }
    .searchFor>h2{
        display: inline-block;
        width: 80%;
    }
    .searchFor>i{
        display: inline-block;
        width: 60px;
        height: 60px;
        font-size: 40px;
        margin:10px 40px;
        float: right;
        color: #8c939d;
    }
    .searchFor>span{
      font-size: 26px;
    }
</style>
